<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>Pizza</title>
  <link rel="stylesheet" href="../pizza/css/ui.css?_t=undefined">
</head>
<body class="pz-contain">
<h2>选项卡</h2>
<hr class="fn-mt10">
<div id="j-tab" class="pz-tab fn-mt20">
  <div class="tab-title">
    <ul class="tab-nav fn-clear">
    <li class="tab-li-first active">
      <a href="javascript:void(0)">Tab选项1</a>
    </li>
    <li class="">
      <a href="javascript:void(0)">Tab选项2</a>
    </li>
    <li class="">
      <a href="javascript:void(0)">Tab选项3</a>
    </li>
    </ul>
  </div>
  <div class="tab-content fn-pd20">
    <div class="tab-pane active">
      <p>zheshiyi</p>
      <img src="/static/img/demo-image1.jpg" alt="deom1-image">
    </div>
    <div class="tab-pane">
      <img src="/static/img/demo-image2.jpg" alt="deom2-image">
      <p>dierge</p>
    </div>
    <div class="tab-pane">
      <p>sangele</p>
      <img src="/static/img/demo-image3.jpg" alt="deom3-image">
    </div>
  </div>
</div>  
<script type="text/javascript" src="//static.xinhuaapp.com/js/jquery-1.11.0-min.js"></script>
<script>
var tabLi=$('#j-tab .tab-title li');
var tabPane=$('#j-tab .tab-pane');
tabLi.click(function(){
  tabPane.removeClass('active');
  tabLi.removeClass('active');
  tabLi.eq($(this).index()).addClass('active');
  tabPane.eq($(this).index()).addClass('active');
})
</script>
</body>
</html>